<%@ page language="java" isThreadSafe="true" pageEncoding="utf8" %>
<html lang="en">
<head>
    <title>主页</title>
    <!-- 引入Vue.js -->
    <script src="./ststic/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./ststic/js/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./ststic/js/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-header >
                    <div style="float: right; font-size: 15px">
                        <el-dropdown>
                            <i class="el-icon-setting" style="margin-right: 10px"></i>
                            <el-dropdown-menu>
                                    <el-button onclick=window.location.href='/loginout'>登出</el-button>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span>&nbsp</span>
                    ${name}
                    </div>
                    <span>岭南师范学院计算机与智能教育学院社团管理系统</span>
                </el-header>
            </el-header>
            <el-container>
                <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                    <el-menu :default-openeds="['1', '2']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-edit-outline"></i>管理</template>
                            <el-menu-item index="1-1">
                                <i class="el-icon-user-solid"></i><el-link href="/student/queryAllStu">学生管理</el-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <i class="el-icon-paperclip"></i><el-link href="/club/queryAllClub">社团管理</el-link>
                            </el-menu-item>
                            <el-menu-item index="1-3">
                                <i class="el-icon-suitcase"></i><el-link href="/position/queryAllPost">职位管理</el-link>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        method:{
        }
    })
</script>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
        width:200px;

    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
    body > .el-container {
        margin-bottom: 40px;
    }
    body{
        padding: 0;
        margin: 0;
    }
</style>
</html>